<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">角色管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							   class="form-control pull-right" placeholder="角色名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
					<table class="table table-hover">
						<thead>
						<tr>
							<th>序号</th>
							<th>角色名称</th>
							<th>备注</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>创建用户</th>
							<th>修改用户</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody id="tbodyId">
						</tbody>
					</table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix">
			</div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){
		$("#pageId").load("doPageUI",function(){
			doGetObjects();
		});
		$(".input-group-btn")
				.on("click",".btn-search",doQueryObjects)
				.on("click",".btn-add",doLoadEditUI)
		$("#tbodyId")
				.on("click",".btn-update",doLoadEditUI)
	});
	function doLoadEditUI(){
		var title;
		if($(this).hasClass('btn-add')){
			title="添加角色";
			doLoadPageUI(title);
		}else{
			title="修改角色"
			let id=$(this).parents("tr").data("id");
			let url=`role/doFindById/${id}`;
			$.get(url,function(result){
				if(result.state==1){
					result.data.id=id;//在结果中动态追加id
					$("#mainContentId").data("data",result.data);
					doLoadPageUI(title);//异步加载页面
				}else{
					alert(result.message);
				}
			});
		}
	}
	function doLoadPageUI(title){
		var url="role/role_edit"
		$("#mainContentId")
				.load(url,function(){
					$(".box-title").html(title);
				})
	}
	function doQueryObjects(){
		$("#pageId").data("pageCurrent",1);
		doGetObjects();
	}
	function doGetObjects(){
		debugger
		//1.params
		//获取在Page.html中绑定的当前页码值
		var pageCurrent=$("#pageId").data("pageCurrent");
		//假如没有值,设置初始值为1
		if(!pageCurrent)pageCurrent=1;
		//var params="pageCurrrent="+pageCurrent;
		var params={"pageCurrent":pageCurrent};
		//获取查询时用户输入的名字
		var name=$("#searchNameId").val();
		if(name)params.name=name;
		//2.url
		var url="role/doFindPageObjects";
		//3.ajax request
		console.log(params);
		$.getJSON(url,params,function(result){
			doHandleResponseResult(result);
		});
	}
	function doHandleResponseResult(result){

		if(result.state==1){
			doSetTableBodyRows(result.data.records);
			doSetPagination(result.data);//page.html
		}else{
			doSetTableBodyErrors(result.message);
		}
	}
	function doSetTableBodyErrors(message){
		//获取body对象并清空
		var tBody=$("#tbodyId");
		tBody.empty();
		//创建tr对象
		var tr=$("<tr></tr>");
		//创建td对象
		//var len=$("table thead").find("tr").find("th").length;
		var len=$("table th").length;
		var td=$("<td></td>");
		td.prop("colspan",len);
		td.append(message);
		tr.append(td);
		//将tr追加到tbody
		tBody.append(tr);
	}
	function doSetTableBodyRows(records){

		//获取tbody对象,并清空
		var tBody=$("#tbodyId");
		tBody.empty();
		//2.迭代数据,并追加到tBody
		for(var i in records){
			//2.1构建tr对象
			var tr=$("<tr></tr>");
			tr.data("id",records[i].id);
			//2.2构建tds对象
			var tds=doCreateTds(records[i],i);
			//2.3将tds对象追加到tr中
			tr.append(tds);
			//2.4将tr追加到tbody中
			tBody.append(tr);
		}
	}
	function doCreateTds(row,i){
		var tds=
				"<td>"+(parseInt(i)+1)+"</td>"+
				"<td>"+row.name+"</td>"+
				"<td>"+row.note+"</td>"+
				"<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
				"<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
				"<td>"+row.createdUser+"</td>"+
				"<td>"+row.modifiedUser+"</td>"+
				"<td><a class='btn-update'>update</a></td>";
		return tds;
	}
</script>
